<template>
	<view>
		<view class="pagess">
			<!-- <view class="mask"></view> -->
			<uNavbar title="选车" bgColor=" #10191F" leftIconColor="#ffffff" :titleStyle="titleStyle"></uNavbar>
		<view class=" navigation flex_dq">
			<view class="navigation_box flex_c" :class="item.id == navId ? 'active':''" v-for="(item,index) in navList"
				:key="item.id" @click="changeNav(item.id)">
				<view class="activeimg"></view>
				<!-- <text>{{item.name}}</text> -->
				<text>{{item.name.slice(0,5)}}</text>
			</view>
		</view>
			<view class="choose_box flex_ZC" :class="item.id == ids? 'active2':''" v-for="(item,index) in carList"
				:key="item.id" @click="changeCar(item.id)">
				<view class="car_box flex_ld">
					<view class="car_box_tit flex_Z">
						<view class="car_box_tit_l flex_dq">
							<image src="../../static/icon/i_car1.png" mode="aspectFill"></image>
							<text>厂商指导价</text>
						</view>
						<view class="car_number">
							<text>{{item.market_price}}</text>
							<image class="car_bg1" src="../../static/image/car1.png" mode=""></image>
						</view>
					</view>
					<view class="car_box_tit flex_Z">
						<view class="car_box_tit_l flex_dq">
							<image src="../../static/icon/i_car1.png" mode="aspectFill"></image>
							<text>参与人数</text>
						</view>
						<view class="car_number">
							<text>{{item.in_number}}</text>
							<image class="car_bg1" src="../../static/image/car1.png" mode=""></image>
						</view>
					</view>
				</view>
				<view class="carname flex_c">
					<text>{{item.car_name}}</text>
				</view>
				<view class="car_img">
					<image class="bg1" src="../../static/image/car_bg.png" mode="aspectFill"></image>
					<image class="bg2" :src="item.cover" mode="aspectFill"></image>
					<image class="carlogo" :src="item.car_logo" mode="aspectFill"></image>
				</view>
				
				<view class="introduce">
					<view class="introduce_box flex_ld">
						<text class="f26 ">总配件量：{{item.accessory_number}}</text>
						<text class="f26 ">配件总价：{{item.accessory_total_price}}</text>
					</view>
					<view class="introduce_box flex_ld">
						<text class="f28 ">当前基金累计</text>
						<text class="f32 fw7">￥{{item.accumulated_price}}</text>
					</view>
					<view class="progress flex_ld">
						<u-line-progress :percentage="item.accumulated_ratio" height="12" inactiveColor="transparent"></u-line-progress>
					</view>
				</view>
			</view>
			<view class="empty2"></view>
			<noDatas :xxxList="carList" :type="2" :showMore="false" ></noDatas>
			
			<view class="btn_confirm flex_c" v-if="ids" @click="$u.debounce(clickCarIndex, 800)">
				<u-transition :show="transitionShow" mode="fade-left">
					<text class="btnqr">确认</text>
				</u-transition>
			</view>
			<view class="empty"></view>
		</view>

	</view>
</template>

<script>
	import {carpoolTarget,chooseTarget,installment,carpoolAgain } from "../../api/mycar.js";
	export default {
		data() {
			return {
				ids: '',
				navId:1,
				sumNumber: 45, //比例
				transitionShow: false,
				carList: [],
				titleStyle: {
					color: '#ffffff'
				},
				navList: [],
				again:0
			}
		},
		onLoad(options) {
			console.log(options)
			this.again=options.again
			console.log(this.again,"000")
			this.initList()
		},

		methods: {
			// 计算总价
			totalPrice(allPrice, leiji) {
				console.log(allPrice * 100, leiji * 100);
				return ((allPrice * 100) / (leiji * 100)).toFixed(2)
			},
			// 拼车列表
			initList() {
				carpoolTarget().then(res => {
					console.log(res);
					if (res.code == 1) {
						this.navList = res.data
						this.navId = res.data[0].id
						this.initDetail()
					}
				})
			},

			changeCar(id) {
				console.log(id);
				this.ids = id
				this.transitionShow = true
			},
			//切换
			changeNav(id) {
				this.navId = id
				this.ids = ''
				this.initDetail()
			},
			initDetail(){
				let data = {
					id:this.navId
				}
				installment(data).then(res => {
					console.log(res);
					if (res.code == 1) {
						this.carList = res.data.carpool_target
					}
				})
			},
			clickCarIndex() {
				let data = {
					target_id: this.ids
				}
				console.log(this.again,"000")
				if(this.again==1){
					uni.removeStorageSync("carBuyTips")
					carpoolAgain(data).then(res => {
						console.log(res);
						if (res.code == 1) {
							uni.$u.toast(res.msg);
							setTimeout(function() {
								uni.reLaunch({
									url: '/pagesMy/nationalCarPooling/carIndex'
								})
							}, 1000);
						}
					})
					
				}else{
					chooseTarget(data).then(res => {
						console.log(res);
						if (res.code == 1) {
							uni.$u.toast(res.msg);
							setTimeout(function() {
								uni.reLaunch({
									url: '/pagesMy/nationalCarPooling/carIndex'
								})
							}, 1000);
						}
					})
				}
				

			},
			goBack() {
				//获取页面栈的长度
				const canNavBack = getCurrentPages()
				console.log(canNavBack.length);
				// 判断是否刷新了浏览器，刷新了浏览器，页面栈只有当前一个
				if (canNavBack.length > 1) {
					uni.navigateBack({
						delta: 1
					})
				} else {
					uni.switchTab({
						url: '/pages/index/index'
					})
				}
			},
		},
	}
</script>

<style scoped>
	@font-face {
		font-family: 'iconfont2';
		src: url("~@/iconfont/YouSheBiaoTiHei.ttf");
	}
	.navigation {
		position: relative;
		width: 620rpx;
		height: 64rpx;
		background: #162430;
		margin: 30rpx auto;
		overflow-x: auto;
	}

	.navigation_box {
		width: 50%;
		height: 64rpx;
		font-size: 32rpx;
		color: #ffffff60;
		z-index: 9;
	}

	.active {
		position: relative;
		color: #ffffff;
		background: url('../../static/image/car_nav.png');
		background-size: 100% 100%;
	}

	.active::before {
		content: '';
		position: absolute;
		top: -50rpx;
		left: 0;
		width: 100%;
		height: 100rpx;
		background: url('../../static/image/car_xz.png');
		background-size: 100% 100%;
	}

	.pagess {
		width: 100%;
		min-height: 100vh;
		background: #10191F;
	}

	.mask {
		width: 100%;
		height: 50rpx;
	}

	.choose_box {
		position: relative;
		width: 620rpx;
		height: 680rpx;
		margin: 26rpx auto 0;
		box-shadow: inset 0rpx 0rpx 30rpx 0rpx #1C85DB;
		opacity: 0.7;
		overflow: hidden;
	}

	.paly_txt {
		font-size: 44rpx;
		color: #ffffff;
	}

	.active2 {
		opacity: 1;
		box-shadow: inset 0rpx 0rpx 50rpx 20rpx #1C85DB;
		/* animation: redBall 6s linear normal infinite; */
	}

	@keyframes redBall {
		0% {
			box-shadow: 0 0 20px #fff, 20px 0 80px rgb(0, 255, 213), -20px 0 80px rgb(67, 160, 71), inset 0 0 50px #fff, inset -200px 0 80px rgb(0, 230, 118);
		}

		25% {
			box-shadow: 0 0 20px #fff, 20px 0 80px rgb(0, 188, 212), -20px 0 80px rgb(126, 87, 194), inset 0 0 50px #fff, inset -100px 0 80px rgb(0, 64, 255);
		}

		50% {
			box-shadow: 0 0 20px #fff, 20px 0 80px rgb(126, 87, 194), -20px 0 80px rgb(244, 143, 177), inset 0 0 50px #fff, inset 0px 0 80px rgb(245, 0, 87);
		}

		75% {
			box-shadow: 0 0 20px #fff, 20px 0 80px rgb(0, 64, 255), -20px 0 80px rgb(126, 87, 194), inset 0 0 50px #fff, inset -100px 0 80px rgb(0, 188, 212);
		}

		100% {
			box-shadow: 0 0 20px #fff, 20px 0 80px rgb(0, 230, 118), -20px 0 80px rgb(67, 160, 71), inset 0 0 50px #fff, inset -200px 0 80px rgb(0, 255, 213);
		}
	}

	.car_box {
		width: 100%;
		color: #ffffff;
		padding: 20rpx 30rpx;
		/* background: pink; */
	}

	.car_box_tit {
		font-size: 26rpx;
	}

	.car_box_tit_l>image {
		width: 22rpx;
		height: 22rpx;
		margin-right: 10rpx;
	}

	.car_img {
		position: relative;
		width: 576rpx;
		height: 506rpx;
		/* background: pink; */
	}

	.bg1 {
		width: 150%;
		height: 150%;
		position: absolute;
		top: -270rpx;
		left: 50%;
		transform: translateX(-50%);
		z-index: 2;
	}

	.bg2 {
		position: absolute;
		top: 30rpx;
		left: 0;
		width: 540rpx;
		height: 320rpx;
		z-index: 3;
	}
	.carlogo{
		position: absolute;
		top: 270rpx;
		right: 40rpx;
		width: 60rpx;
		height: 74rpx;
		z-index: 3;
	}

	.car_number {
		position: relative;
		width: 212rpx;
		margin-top: 24rpx;
		background: pink;
	}

	.car_number>text {
		position: absolute;
		top: -24rpx;
		left: 20rpx;
		font-size: 48rpx;
		z-index: 2;
		font-family: 'iconfont2';
	}

	.car_bg1 {
		position: absolute;
		top: 0;
		left: 0;
		max-width: 320rpx;
		height: 48rpx;
		z-index: 1;
	}
	.carname{
		position: absolute;
		top: 436rpx;
		left: 0;
		width: 100%;
		/* background: pink; */
		font-family: 'iconfont2';
		color: #ffffff;
		font-size: 48rpx;
		z-index: 999;
		letter-spacing: 8rpx;
	}

	.introduce {
		position: absolute;
		bottom: 30rpx;
		left: 50%;
		transform: translateX(-50%);
		width: 88%;
		color: #ffffff;
	}

	.progress {
		padding: 8rpx 10rpx;
		background: #153f4a;
		border-radius: 40rpx;
		margin-top: 20rpx;
	}


	.btn_confirm {
		position: fixed;
		bottom: 0rpx;
		width: 100%;
		height: 120rpx;
		background: #10191F;
		margin: 0 auto;
		z-index: 9;
	}
	.btnqr{
		width: 620rpx;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		box-shadow: inset 0rpx 0rpx 30rpx 0rpx #1C85DB;
		font-size: 36rpx;
		color: #ffffff;
		z-index: 9;
	}

	/deep/.u-line-progress__line {
		background: linear-gradient(90deg, #7bb9ec 0%, #2693EC 100%);
	}
</style>